<template>
  <!--责任部门-->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-tabs v-model="activeName">
      <!-- 项目分配给部门 -->
      <el-tab-pane label="指定部门" name="first" :disabled="deptTab">
        <!--搜索表单-->
        <el-form v-if="dialogVisible" ref="deptForm" :model="filters" label-width="80px" class="dialog-form">
          <el-row>
            <el-col :span="10" class="formHeight">
              <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="filters.deptName" placeholder="请输入部门名称" clearable size="small" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--操作按钮-->
        <el-row :gutter="10" class="button-wrap">
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="deptTable"
          :data="deptList"
          style="width: 100%;"
          stripe
          row-key="deptId"
          class="table-list"
          :row-style="rowClass"
          @selection-change="handleSelectionChange"
          @row-click="rowChecked"
        >
          <el-table-column type="selection" width="38" align="center" />
          <el-table-column prop="deptName" label="部门名称" min-width="150" align="center" />
          <el-table-column prop="createTime" label="创建时间" width="150" align="center" />
        </el-table>
      </el-tab-pane>
      <!-- 项目分配人员 -->
      <!--<el-tab-pane label="指定人员" name="second" :disabled="personTab">
        &lt;!&ndash;搜索表单&ndash;&gt;
        <el-form v-if="dialogVisible" ref="personForm" :model="query" label-width="80px" class="dialog-form">
          <el-row>
            <el-col :span="10" class="formHeight">
              <el-form-item label="人员名称" prop="userName">
                <el-input v-model="query.userName" placeholder="请输入人员名称" clearable size="small" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        &lt;!&ndash;操作按钮&ndash;&gt;
        <el-row :gutter="10" class="button-wrap">
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-search" size="mini" @click="handlePersonQuery">搜索</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button v-clickForbidden icon="el-icon-refresh" size="mini" @click="resetPersonQuery">重置</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="personTable"
          :data="personList"
          style="width: 100%;"
          stripe
          class="table-list"
          :row-style="rowClassPerson"
          @row-click="rowCheckedPerson"
          @selection-change="handleSelectionPerson"
        >
          <el-table-column type="selection" width="38" align="center" />
          <el-table-column prop="userName" label="人员名称" min-width="150" align="center" />
          <el-table-column prop="idCard" label="身份证号" min-width="150" align="center" />
          <el-table-column prop="createTime" label="创建时间" align="center" width="150" />
        </el-table>
        <pagination
          :total="personTotal"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          @pagination="getUserList".project-show
        />
      </el-tab-pane>-->
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
</template>

<script>
import { listDeptAll, listUser, addDeptAndUser } from '@/api/projectManage/ProjectAllocation/distributionList'
// dialog-footer
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
export default {
  name: 'Add',
  components: {
    DialogFooter
  },
  data() {
    return {
      /** 部门 start*/
      // 部门筛选条件
      filters: {
        pageNum: 1,
        pageSize: 10,
        deptName: ''
      },
      deptList: [], // 部门列表
      deptTotal: 0,
      deptArr: [],
      selectRowDept: [],
      /** 部门 end*/

      /** 人员 start*/
      // 人员筛选条件
      query: {
        pageNum: 1,
        pageSize: 10,
        userName: ''
      },
      personList: [], // 人员列表
      personTotal: 0, // 人员总数
      personnelArr: [],
      selectRowPerson: [],
      /** 人员 end*/

      /** 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      proId: '',
      activeName: 'first' // tab切换
      /** 新增 end*/
    }
  },
  computed: {
    deptTab: {
      get() {
        return this.personnelArr.length > 0
      },
      set(val) {
        return !val
      }
    },
    personTab: {
      get() {
        return this.deptArr.length > 0
      },
      set(val) {
        return !val
      }
    }
  },
  methods: {
    /** 部门 start*/
    // 部门列表选择
    handleSelectionChange(val) {
      this.deptArr = val
      this.personTab = true
      if (val.length > 1) {
        this.$refs.deptTable.clearSelection()
        this.$refs.deptTable.toggleRowSelection(val.pop())
      }
      this.selectRowDept = []
      if (this.deptArr.length > 0) {
        this.deptArr.forEach((item, index) => {
          this.selectRowDept.push(this.deptList.indexOf(item))
        })
      }
    },
    // 点击行时,选框选中
    rowChecked(row) {
      this.$refs.deptTable.toggleRowSelection(row)
    },
    // 高亮样式
    rowClass({ row, rowIndex }) {
      if (this.selectRowDept.includes(rowIndex)) {
        return {
          'background-color': 'rgba(185,221,249,.75)'
        }
      }
    },
    // 获取列表数据
    async getDeptList() {
      const { data } = await listDeptAll(this.filters)
      this.deptList = data
    },
    // 搜索方法
    handleQuery() {
      this.filters.pageNum = 1
      this.getDeptList()
    },
    emptyForm() {
      this.resetForm('deptForm')
    },
    // 重置按钮操作
    resetQuery() {
      this.emptyForm()
      this.handleQuery()
    },
    /** 部门 end*/

    /** 人员 start*/
    // 人员列表选择
    handleSelectionPerson(val) {
      this.personnelArr = val
      if (val.length > 1) {
        this.$refs.personTable.clearSelection()
        this.$refs.personTable.toggleRowSelection(val.pop())
      }
      this.selectRowPerson = []
      if (this.personnelArr.length > 0) {
        this.personnelArr.forEach((item, index) => {
          this.selectRowPerson.push(this.personList.indexOf(item))
        })
      }
    },
    // 点击行时,选框选中
    rowCheckedPerson(row) {
      this.$refs.personTable.toggleRowSelection(row)
    },
    // 高亮样式
    rowClassPerson({ row, rowIndex }) {
      if (this.selectRowPerson.includes(rowIndex)) {
        return {
          'background-color': 'rgba(185,221,249,.75)'
        }
      }
    },
    async getUserList() {
      const { data: { rows, total }} = await listUser(this.query)
      this.personList = rows
      this.personTotal = total
    },
    // 搜索方法
    handlePersonQuery() {
      this.query.pageNum = 1
      this.getUserList()
    },
    emptyPersonForm() {
      this.resetForm('personForm')
    },
    // 重置按钮操作
    resetPersonQuery() {
      this.emptyPersonForm()
      this.handlePersonQuery()
    },
    /** 人员 end*/

    /* 新增/编辑弹层 start*/
    // 新增/编辑
    handleAdd(title, proId) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.proId = proId
      this.getDeptList()
      this.getUserList()
    },
    // 提交按钮
    async submitForm() {
      let obj
      const { deptArr, personnelArr, proId } = this
      if (!deptArr.length && !personnelArr.length) {
        this.cancel()
        return
      } else if (this.activeName === 'first') {
        obj = { nodeId: this.deptArr[0].deptId, deptCode: this.deptArr[0].deptCode, proId, status: '0' }
      } else if (this.activeName === 'second') {
        obj = { nodeId: this.personnelArr[0].userId, deptCode: this.personnelArr[0].deptCode, proId, status: '1' }
      }
      await addDeptAndUser(obj)
      this.msgSuccess('分配成功')
      this.cancel()
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.emptyForm()
      this.emptyPersonForm()
    }
  }
}
</script>

